<template>
  <div>
    <el-form ref="userform" :model="form" :rules="rules" class="userform" label-width="100px">
      <div class="bg_fff userbox mb_10">
        <div class="c_000 f-16 flex aligncenter mb_20"><span class="c_F11616 mr_4">*</span> 账户信息</div>
        <el-form-item>
          <template slot="label">
            <span class="labelavatar">头像</span>
          </template>
          <div class="flex pl_15 aligncenter">
            <div>
              <el-image :src="form.photo?form.photo:defaultAvatar" alt="" class="avatar"></el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <span class="pl_15">{{form.user_login||'-'}}</span>
        </el-form-item>
        <el-form-item label="绑定手机号" prop="mobile">
          <span class="pl_15">{{form.mobile||'-'}}</span>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <span class="pl_15">{{form.email||'-'}}</span>
        </el-form-item>
        <!-- <el-form-item label="登录密码" prop="name">
          <span class="pl_15">*************</span>
        </el-form-item> -->
      </div>
      <div class="bg_fff userbox mb_10">
        <div class="c_000 f-16 flex aligncenter mb_20"><span class="c_F11616 mr_4">*</span> 主体信息</div>
        <el-form-item label="主体类型" prop="name">
          <span class="pl_15">{{form.main_type_name||"-"}}</span>
        </el-form-item>
        <el-form-item label="主体名称" prop="name">
          <span class="pl_15">{{form.main.type_text||'-'}}</span>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <span class="pl_15">{{form.main.name||'-'}}</span>
        </el-form-item>
        <el-form-item label="身份证号" prop="name">
          <span class="pl_15">{{form.main.id_card||'-'}}</span>
        </el-form-item>
        <el-form-item label="身份证照片" prop="name">
          <div class="flex pl_15">
            <el-image :src="form.main.photo_front?form.main.photo_front:''" alt="" class="idcardimg mr_15" />
            <el-image :src="form.main.photo_hand?form.main.photo_hand:''" alt="" class="idcardimg mr_15" />
            <el-image :src="form.main.photo_opposite?form.main.photo_opposite:''" alt="" class="idcardimg mr_15" />
          </div>
        </el-form-item>
      </div>
      <div class="bg_fff userbox mb_10">
        <div class="c_000 f-16 flex aligncenter mb_20"><span class="c_F11616 mr_4">*</span> 广告资质</div>
        <el-form-item label="所属行业" prop="name">
          <span class="pl_15">{{form.industry_type_name||"-"}}</span>
        </el-form-item>
        <el-form-item label="资质上传" prop="name">
          <div class="flex pl_15">
            <el-image :src="form.industry.photo_other?form.industry.photo_other:''" alt="" class="idcardimg mr_15" />
            <el-image :src="form.industry.photo_trade?form.industry.photo_trade:''" alt="" class="idcardimg mr_15" />
          </div>
        </el-form-item>
        <el-form-item label="资质开户名称" prop="name">
          <span class="pl_15">{{form.bln_name||"-"}}</span>
        </el-form-item>
        <el-form-item label="营业执照号码" prop="name">
          <span class="pl_15">{{form.bln||"-"}}</span>
        </el-form-item>
      </div>
      <div class="bg_fff userbox mb_20">
        <div class="c_000 f-16 flex aligncenter mb_20"><span class="c_F11616 mr_4">*</span> 开票信息</div>
        <div class="flex">
          <div class="l_box">
            <div class="c_000 f-16 flex aligncenter mb_15 pl_20">开票信息</div>
            <el-form-item label="发票类型" prop="invoice_type">
              <span class="pl_15" v-if="form.invoice">{{form.invoice.type == 1?'增值税专用发票':'普票'}}</span>
            </el-form-item>
            <el-form-item label="开户名称" prop="invoice_name">
              <span class="pl_15">{{form.invoice.invoice_name || '-' }}</span>
            </el-form-item>
            <el-form-item label="开户账号" prop="invoice_name">
              <span class="pl_15">{{form.invoice.bank_crad || '-' }}</span>
            </el-form-item>
            <el-form-item label="开户银行" prop="invoice_name">
              <span class="pl_15">{{form.invoice.bank_crad_name || '-' }}</span>
            </el-form-item>
            <el-form-item label="纳税人识别号" prop="number">
              <span class="pl_15">{{form.invoice.number || '-' }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span class="pl_15">{{form.invoice.invoice_address || '-' }}</span>
            </el-form-item>
          </div>
          <div class="l_box">
            <div class="c_000 f-16 flex aligncenter mb_15 pl_20">邮寄地址</div>
            <el-form-item label="收件单位">
              <span class="pl_15">{{form.invoice.put_name || '-' }}</span>
            </el-form-item>
            <el-form-item label="收件地址">
              <span class="pl_15">{{form.invoice.put_address || '-' }}</span>
            </el-form-item>
            <el-form-item label="邮编">
              <span class="pl_15">{{form.invoice.zip_code || '-' }}</span>
            </el-form-item>
            <el-form-item label="收件人">
              <span class="pl_15">{{form.invoice.username || '-' }}</span>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div class="flexend">
      <el-button @click="handleCloseAdd">审批驳回</el-button>
      <el-button type="primary" @click="submitForm" :loading='loading'>审核通过</el-button>
    </div>

    <el-dialog
      title="审批驳回"
      :visible.sync="open"
      width="520px"
      class="commdia"
      :before-close="handleClose"
      :close-on-click-modal='false'
      append-to-body
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="top">
        <el-form-item label="驳回原因" prop="msg">
          <el-input v-model="ruleForm.msg" placeholder="请输入驳回原因" type="textarea" rows="5"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading='s_loading' @click="handleBohui">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validPhone } from "@/utils/validate";
import { userInfo,checkStatusOpen,checkStatusClose } from "@/api/advmaster";
export default {
  data() {
    return {
      form: {
        main:{},
        invoice:{},
        industry:{}
      },
      open:false,
      ruleForm:{
        msg:''
      },
      rules:{
        msg:[{ required: true, message: '请输入驳回原因', trigger: 'blur' }]
      },
      mainType:[],
      industryList:[],
      all_loading :true,
      loading:false,
      s_loading:false,
      defaultAvatar:require('@/assets/images/defaultavator.png')
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {
    // 主体类型
    this.getDicts('/manager/api/getCustomType').then(res=>{
      this.mainType = res.data
      this.getInfo()
    })
    // 行业类型
    this.getDicts('/manager/api/industry').then(res=>{
      this.industryList = res.data
    })
  },
  methods: {
    // 获取info信息
    getInfo(){
      userInfo({id:this.rowitem.id}).then(res=>{
        this.form = res.data
        if(this.form.photo){
          this.form.photo = this.form.photo.startsWith("http") ? this.form.photo : this.domain + '/' + this.form.photo
        }
        this.form.main_type_name = ''
        this.form.industry_type_name = ''
        if(this.form.main.type){
          for (const key in this.mainType) {
            if(this.form.main.type == key){
              this.form.main_type_name = this.mainType[key]
            }
          }
        }
        if(this.form.industry.industry_id){
          this.industryList.forEach(item => {
            if(this.form.industry.industry_id == item.id){
              this.form.industry_type_name = item.name
            }
          });
        }
        this.form.main.photo_front = this.form.main.photo_front.startsWith("http") ? this.form.main.photo_front : this.domain+'/'+this.form.main.photo_front
        this.form.main.photo_hand = this.form.main.photo_hand.startsWith("http") ? this.form.main.photo_hand : this.domain+'/'+this.form.main.photo_hand
        this.form.main.photo_opposite  = this.form.main.photo_opposite.startsWith("http") ? this.form.main.photo_opposite : this.domain+'/'+this.form.main.photo_opposite
        this.form.industry.photo_other = this.form.industry.photo_other.startsWith("http") ? this.form.industry.photo_other : this.domain+'/'+this.form.industry.photo_other
        this.form.industry.photo_trade = this.form.industry.photo_trade.startsWith("http") ? this.form.industry.photo_trade : this.domain+'/'+this.form.industry.photo_trade
        this.form.bln=this.form.industry.bln;
        this.form.type_text=this.form.main.type_text;
        this.form.bln_name=this.form.industry.bln_name;
        this.all_loading = false
      }).catch(()=>{
        this.all_loading = false
      })
    },

    submitForm: function () {
      this.$confirm('是否确定审批通过?', '确认提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        checkStatusOpen({
          id:this.rowitem.id
        }).then(() => {
          this.loading = false
          this.$modal.msgSuccess("审批成功");
          this.$emit("close", 1);
        }).catch(() => {
        this.loading = false
      });
      }).catch(() => {
        this.loading = false
      });
    },

    handleCloseAdd(){
      this.open = true
    },


    handleClose(){
      this.open = false
    },

    handleBohui(){
      this.$refs.ruleForm.validate(valid=>{
        if(!valid) return
        this.s_loading = true
        checkStatusClose({
          id:this.rowitem.id,
          msg: this.ruleForm.msg
        }).then(()=>{
          this.s_loading = false
          this.$message.success('驳回成功')
          this.handleClose()
          this.$emit("close", 1);
        }).catch(()=>{
          this.s_loading = false
        })
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.userbox{
  padding: 10px 20px;
}
.labelavatar{
  line-height: 70px;
}
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.userform{
  ::v-deep .el-form-item__label{
    color: #545867;
    font-weight: normal;
  }
  .el-form-item{
    margin-bottom: 20px;
  }
}
.idcardimg{
  width: 145px;
  height: 100px;
}
.l_box{
  flex: 1;
}
</style>
